可漸變為指定的 opacity。

speed 無默認值，須直接指定 slow、fast、Time。

手動或拖拉設定透明度：

<input> 設定值的方式用 .val () 完成。

跟 fade 系列一樣，後面帶的參數都是 (speed,callback)

執行順序前後的差別。

  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了"); // 隱藏效果完全實現後出現此提示訊息
    });
  });

  $("button").click(function(){
    $("p").hide(1000);
    alert("段落现在被隐藏了"); // 隱藏效果完成前就出現此提示訊息
  });

text() - 設置或返回所選元素的文本內容

html() - 設置或返回所選元素的內容（包括HTML 標記）

val() - 設置或返回表單字段的值

css() - 返回指定的 CSS 屬性的值

attr() - 獲取 html tag 屬性值

()裡面放入字串即可設定值， attr() 值的設定方式則是 attr(屬性名稱, 屬性值)。

note: css() 與 attr() 比較

$("p").css("background-color") // 返回首個匹配 p 的 background-color 值        
$("#runoob").attr("href") // 取得 #runoob 的 href 的屬性值

append() - 在被選元素的結尾插入內容 [仍然在该元素的内部]

prepend() - 在被選元素的開頭插入內容 [仍然在该元素的内部]

after() - 在被選元素之後插入內容 [在該元素外面]

before() - 在被選元素之前插入內容 [在該元素外面]

remove() - 刪除被選元素（及其子元素）

empty() - 從被選元素中刪除子元素

$('#div1').remove(); 
#div1也會被刪掉

$('#div1').empty();
#div1還在，裡面的東西清空		

$('p').remove('.italic');
可以指定參數，比如只移除 class=italic 的 <p>

addClass() - 向被選元素添加一個或多個類

removeClass() - 從被選元素刪除一個或多個類

toggleClass() - 對被選元素進行添加/刪除類的切換操作

width()、 height()、innerWidth()、 innerHeight()、outerWidth()、 outerHeight()

parent() - 返回被選元素的直接父元素

parents() - 返回被選元素的的所有祖先元素

parentsUntil() - 返回介於兩個給定元素之間的所有祖先元素

  <div class="div1">div (曾祖父元素)
    <ul class="ul1">ul (祖父元素)  
      <li class="li1">li (父元素)
        <span class="span1">span</span>
      </li>
    </ul>   
  </div>

.div1 *
{ 
	display: block;
	border: 2px solid #aaa;
	color: #aaa;
	padding: 5px;
	margin: 15px;
}

$(".span1").parent().css({"color":"deeppink","border":"2px solid deeppink"});
// $(".li1").parents().css({"color":"lightblue","border":"2px solid lightblue"});
$(".ul1").parentsUntil(".parentDemo").css({"color":"orange","border":"2px solid orange"});        

code 運行結果：

parents() 可能汙染樣式，謹慎使用。

parentsUntil 最高可以把 DOCTYPE 都放進去。

children() - 返回被選元素的直接子元素

find() - 返回被選元素的所有子元素

each() - 為每個匹配元素規定要運行的函數

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

/*
0: foo
1: bar
*/

siblings() - 返回被選元素的所有同級元素

next() - 返回被選元素的下一個同級元素

nextAll() - 返回被選元素的所有跟隨的同級元素

nextUntil()

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>

$("h2").nextAll().css({"color":"red","border":"2px solid red"}); // h3 h4 h5 h4 h5 h6 與 p 被上色。    
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"}); // h3 h4 h5 被上色

prev() - 返回被選元素的上一個同級元素 (與 next() 相反)

prevAll() - 返回被選元素的所有跟隨的同級元素 (參數位置與 nextAll() 相反)

prevUntil() - 參數位置與 nextUntil() 相反

first() - 返回被選元素的首個元素

last() - 返回被選元素的最後一個元素

eq() - 指定被選元素的索引

filter() - 允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回

not() - 與 filter() 相反，允許您規定一個標準。不匹配這個標準的元素會被返回

 <h1>欢迎访问我的主页 </h1>
 <p>菜鸟教程 (index 0). </p>
 <p class="url">http://www.runoob.com (index 1)。 </p>
 <p>google (index 2). </p>
 <p class="url">http://www.google.com (index 3)。 </p>

 $("p").eq(1).css("background-color","yellow"); // index (索引) 為 1 的 http://www.runoob.com 將被上色
 $("p").filter(".url").css("background-color","yellow"); // class == "url"，index == 1 3 的 <p> 將被上色 
 $("p").not(".url").css("background-color","yellow"); // class !== "url"，index == 0 2 的 <p> 將被上色         

$(selector).load(URL,data,callback);

load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

必需的 URL 參數規定您欲加載的 URL。

可選的 callback 參數規定當 load() 方法完成後所要允許的回調函數，回調函數可以設置不同的參數：

responseTxt - 包含調用成功時的結果內容

statusTXT - 包含調用的狀態

xhr - 包含 XMLHttpRequest 對象

$.get() 方法通過 HTTP GET 請求從服務器上請求數據： $.get(URL,callback);

$.post() 方法通過 HTTP POST 請求向服務器提交數據： $.post(URL,data,callback);

可選的 data 參數規定此請求要攜帶的參數

$("button").click(function(){
  $.post("/try/ajax/demo_test_post.php",{
    name:"菜鸟教程",
    url:"http://www.runoob.com"
  },
  function(data,status){
    alert("数据: \n" + data + "\n状态: " + status);
  });
});        

jQuery 使用 $ 符號作為 jQuery 的簡寫，某些 javascript 框架也使用 $ 符號作為簡寫（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡寫符號，有可能導致腳本停止運行。

為避免此類問題發生，這樣的狀況之下可以使用 noConflict() 方法。

noConflict() 會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。

同時，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

也可以創建自己的簡寫，noConflict() 可返回對 jQuery 的引用，您可以把它存入變量，以供稍後使用。

  var jq = $.noConflict();
  jq(document).ready(function(){
    jq("button").click(function(){
      jq("p").text("jQuery 仍然在工作!");
    });
  });  

jquery-examples - 更多實例演示

jQuery 选择器 - selectors 整理

  <div class="demo_seletor_first">
    <p class="demo_seletor_first_p">The first paragraph in body.</p>
    
    <div style="border:1px solid;">
      <p class="demo_seletor_first_p">The first paragraph in div.</p>
      <p class="demo_seletor_first_p">The last paragraph in div.</p>
    </div>
    <br>
    
    <div style="border:1px solid;">
      <span>This is a span element.</span>
      <p class="demo_seletor_first_p">The first paragraph in another div.</p>
      <p class="demo_seletor_first_p">The last paragraph in another div.</p>
    </div>
    
    <p class="demo_seletor_first_p">The last paragraph in body.</p>
  </div>  

  $("p.demo_seletor_first_p:first-child").css("background-color","orange");
  $("p.demo_seletor_first_p:first-of-type").css("text-align","center");

get() - 獲取由選擇器指定的 DOM 元素。

$(selector).get(index)

  <p>1。</p>
  <p>2。</p>
  <p>3。</p>
  <p>4。</p>
  
  <button>獲取 p 的 DOM 元素</button>
  <div class="div1"></div> // 點擊後出現 1。
  <div class="div2"></div> // 點擊後出現 4。

$(document).ready(function(){
  $("button").click(function(){
    x=$("p").get(0);
    y=$("p").get(3);
    
    $(".div1").text(x.nodeName + ": " + x.innerHTML);
    $(".div2").text(y.nodeName + ": " + y.innerHTML);
  });
});